import React from 'react'
import './TodoFooter.css'
export default function TodoFooter(props) {
  let {data,allTodo,clearOk} = props
  // 全选全不选
  let alldo = (e) => {
    allTodo(e.target.checked)
  }
  // 清楚已完成
  let clear = () => {
    clearOk()
  }
  return (
    <div className="todo-footer">
        <label>
          <input checked={data.every((item) => item.done) && data.length} onChange={alldo} type="checkbox"/>
        </label>
        <span>
          <span>已完成{data.filter(item =>item.done).length}/ </span> / 全部{data.length}
        </span>
        <button onClick={clear}className="btn btn-danger">清除已完成任务</button>
    </div>
  )
}
